<template>
  <div class="evaluate_score">
    <!-- 保密提示 -->
    <div class="confidentiality_tips">温馨提示：本季度可评“好”等次{{ goodNum }}人, 已评{{ chooseGoodNum }}人.</div>
    <div class="confidentiality-criteria">
      <div class="criteria-title">考核结果等次评价</div>
      <div class="criteria-box">
        <div class="criteria history" @click.stop="lookHistory" v-if="quarterNow > 0 && !queryRouter.isEnd">
          查看历史评价
        </div>
        <div class="criteria" @click.stop="lookCriteria">查看评分标准</div>
      </div>
    </div>
    <el-scrollbar class="table-con">
      <div class="scrollbar-con">
        <template v-if="lenderUserList.length > 0">
          <!-- <div class="table-title" v-if="queryRouter.busSign !== 'DEAL_MAIN_LEADER_ASSESS_03'">领导成员评价：</div> -->
          <div class="list">
            <div
              class="li"
              :class="{ active: changeUserID === item.userId }"
              v-for="(item, index) in lenderUserList"
              :key="item.userId"
              @click.stop="liClickLeader(item, index)">
              <option-list-li
                :userInfo="item"
                :sortIndex="index"
                :goodNum="goodNum"
                :rollListAll="rollListAll"
                v-bind="$attrs"></option-list-li>
            </div>
          </div>
        </template>
        <template v-if="commonUserList.length > 0">
          <!-- <div class="table-title" v-if="queryRouter.busSign !== 'DEAL_MAIN_LEADER_ASSESS_03'">非领导成员评价：</div> -->
          <div class="list">
            <div
              class="li"
              :class="{ active: changeUserID === item.userId }"
              v-for="(item, index) in commonUserList"
              :key="item.userId"
              @click.stop="liClick(item, index)">
              <option-list-li
                :userInfo="item"
                :sortIndex="lenderUserList.length + index"
                :goodNum="goodNum"
                :rollListAll="rollListAll"
                v-bind="$attrs"></option-list-li>
            </div>
          </div>
        </template>
      </div>
      <div class="list progress" v-if="noSubmitData.length > 0">
        <div
          class="li"
          v-for="(item, index) in noSubmitData"
          :key="item.userId"
          @click.stop="liClickNoSub(item, index)">
          <option-list-li
            :userInfo="item"
            :sortIndex="lenderUserList.length + commonUserList.length + index"
            :goodNum="goodNum"
            :rollListAll="rollListAll"
            v-bind="$attrs"></option-list-li>
        </div>
      </div>
    </el-scrollbar>
    <ScoringCriteria :criteriaShow="criteriaShow" @close="closeCriteria" />
    <HistoryEvaluate
      :historyShow="historyShow"
      @close="closeCriteria"
      :tableList="tableList"
      :quarterNow="quarterNow" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ScoringCriteria from './ScoringCriteria.vue'
import optionListLi from './optionListLi.vue'
import HistoryEvaluate from './HistoryEvaluate.vue'
import { getUserHistoryAssessData } from '@apis/evaluation.js'
export default {
  name: 'EvaluateOption',
  components: { ScoringCriteria, optionListLi, HistoryEvaluate },
  props: {
    activeUser: {
      type: Object,
      default: () => {
        return {}
      },
    },
    dataList: {
      type: Array,
      default: () => [],
    },
    rollListAll: {
      type: Array,
      default: () => [],
    },
    goodNum: {
      type: Number,
      default: 0,
    },
    quarterNow: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      dataReasonList: [
        { label: '好', reasonID: '1' },
        { label: '较好', reasonID: '2' },
        { label: '一般', reasonID: '3' },
        { label: '较差', reasonID: '4' },
      ],
      // 评分标准显示隐藏
      criteriaShow: false,
      // 分管领导是否是主要领导
      lenderUserList: [],
      commonUserList: [],
      lenderUserRankFlag: false,
      commonUserRankFlag: false,
      addSubList: [],
      noSubmitData: [],
      queryRouter: {},
      chooseGoodNum: 0,
      historyShow: false,
      tableList: [],
    }
  },
  computed: {
    ...mapGetters('evaluation', ['changeUserID']),
  },
  watch: {
    rollListAll: {
      handler(news) {
        if (!news) return
        const arr = news.filter(item => {
          return item.assessRank === '1' || (!item.assessRank && item.mainLeaderAssessRank === '1')
        })
        this.chooseGoodNum = arr.length
      },
      deep: true,
      immediate: true,
    },
    dataList() {
      this.handelDataList()
    },
  },
  created() {
    this.queryRouter = this.$route.query
  },
  mounted() {
    this.handelDataList()
    if (Number(this.dataList[0].status) !== 0) {
      this.$emit('setActivePeople', this.dataList[0])
    }
  },
  methods: {
    // 处理数据（是否能催报，以及分管领导是否是主要领导）
    handelDataList(type) {
      console.log('this.dataList :>> ', this.dataList)
      const lenderData = []
      const commonData = []
      let noSubmitData = []
      let submitData = []
      noSubmitData = this.dataList.filter(item => {
        return Number(item.status) === 0
      })
      submitData = this.dataList.filter(item => {
        return Number(item.status) !== 0
      })
      submitData.forEach(item => {
        if (item.isLeaderAssessDataResponseVOS) {
          lenderData.push(item)
        } else {
          commonData.push(item)
        }
      })
      this.lenderUserList = lenderData
      this.commonUserList = commonData
      this.noSubmitData = noSubmitData
      for (let i = 0; i < lenderData.length; i++) {
        if (lenderData[i].needAssessRank === 1) {
          this.lenderUserRankFlag = true
          break
        }
      }
      for (let i = 0; i < commonData.length; i++) {
        if (commonData[i].needAssessRank === 1) {
          this.commonUserRankFlag = true
          break
        }
      }
    },
    // 查看评分标准
    lookCriteria() {
      this.criteriaShow = true
    },
    // 关闭评分标准
    closeCriteria() {
      this.criteriaShow = false
      this.historyShow = false
    },
    liClickLeader(item, index) {
      if (Number(item.status) === 0 || this.activeUser.userId === item.userId) {
        return false
      } else {
        this.$emit('setActivePeople', item)
      }
    },
    liClick(item, index) {
      if (Number(item.status) === 0 || this.activeUser.userId === item.userId) {
        return false
      } else {
        this.$emit('setActivePeople', item)
      }
    },
    liClickNoSub(item, index) {
      if (Number(item.status) === 0 || this.activeUser.userId === item.userId) {
        return false
      } else {
        this.$emit('setActivePeople', item)
      }
    },
    // 查看历史评价
    lookHistory() {
      getUserHistoryAssessData({
        needId: this.queryRouter.needId,
        userId: '',
      }).then(res => {
        this.tableList = res.data
        this.historyShow = true
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.evaluate_score {
  height: 100%;
  width: 100%;
  /deep/ .vxe-header--column .vxe-cell--edit-icon {
    display: none;
  }
  .title-center {
    display: flex;
    justify-content: center;
    align-items: center;
    .icon {
      cursor: pointer;
      font-size: 14px;
      padding-left: 3px;
      margin-left: 3px;
    }
  }
  .table-title {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
    padding-left: 20px;
    color: #409eff;
    span {
      color: #999;
      font-weight: 400;
      font-size: 12px;
    }
  }
  // 保密提示
  .confidentiality_tips {
    color: #a30014;
    font-size: 14px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    background-color: #e9eff48f;
    padding: 0 20px;
  }
  .confidentiality-criteria {
    height: 50px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    .criteria-box {
      display: flex;
      align-items: center;
    }
    .criteria {
      cursor: pointer;
      margin: 0 10px;
    }
    .history {
      color: #409eff;
    }
  }
  .table-con {
    height: calc(100% - 120px);
    .scrollbar-con {
      padding: 0 10px 10px;
    }
    .textarea {
      margin: 5px 0;
    }
    .score-num {
      color: #a30014;
    }

    .status {
      height: 8px;
      width: 8px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 3px;
      &.reviewed {
        background-color: #488c3c;
      }
      &.not_reviewed {
        background-color: #950002;
      }
      &.not_commit {
        background-color: #ccc;
      }
    }
    .progress {
      border-top: 1px dashed #ccc;
      padding: 10px 10px;
    }
    .li {
      padding: 10px 0;
    }
    .active {
      background-color: #f7f9fb;
    }
  }
  .el-icon-info {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #999;
    cursor: pointer;
    font-size: 18px;
  }
}
</style>
